<template>

    <div class="order-summary-card">
          <div class="tips" v-if="tipShow" >财务数据来源于账单核验,只统计【已核验】的账单数据
                <i @click="tipShow = false" class="el-icon-error"></i>
            </div>
         <el-date-picker :clearable="false" key="yearSelect" 
                            style="width: 300px" v-model="timer" align="right" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                            @change="timeSearch" />
        <div class="header">
            <div class="title flex">
                <subtit title="财务分析"></subtit>

               

            </div>

        </div>
        <div class="summary-list">
            <div class="summary-row">
                <div class="summary-item" v-for="item in summaryList" :key="item.key">
                    <div class="label">
                        {{ item.label }}
                        <el-tooltip v-if="item.tip" effect="dark" :content="item.tip" placement="top">
                            <img src="../../assets/img/question.png" alt="问号">
                        </el-tooltip>
                    </div>
                    <div class="value">{{ fenxiData[item.key] || 0 }}</div>
                </div>
            </div>
        </div>
        <div class="header">
            <div class="title flex">
                <subtit title="收入数据"></subtit>
            </div>
        </div>
        <div class="summary-list">
            <div class="summary-row">
                <div class="summary-item" v-for="item in shouruList" :key="item.label">
                    <div class="label">
                        {{ item.label }}
                        <el-tooltip v-if="item.tip" effect="dark" :content="item.tip" placement="top">
                            <img src="../../assets/img/question.png" alt="问号">
                        </el-tooltip>
                    </div>
                    <div class="value">{{ item.value }}</div>
                </div>
            </div>
            <el-empty v-if="shouruList.length == 0" :image-size="100"></el-empty>
        </div>

          <div class="header">
            <div class="title flex">
                <subtit title="支出数据"></subtit>
               
            </div>

        </div>
        <div class="summary-list">
            <div class="summary-row">
                <div class="summary-item" v-for="item in zhichuList" :key="item.label">
                    <div class="label">
                        {{ item.label }}
                        <el-tooltip v-if="item.tip" effect="dark" :content="item.tip" placement="top">
                            <img src="../../assets/img/question.png" alt="问号">
                        </el-tooltip>
                    </div>
                    <div class="value">{{ item.value }}</div>
                </div>
            </div>
             <el-empty v-if="zhichuList.length == 0" :image-size="100"></el-empty>
        </div>
        </div>
   
</template>
<script>
import subtit from "@/components/indexComponents/subtit.vue";
import { shouruzhichu , fenxi } from "@/api/dmgt/index";

export default {
    name:'Financial',
    components: { subtit },
        computed: {
        formatDateRange() {
            // 判断 timer 类型并格式化显示
            if (Array.isArray(this.timer) && this.timer.length === 2) {
                return `${this.timer[0]} ~ ${this.timer[1]}`;
            } else if (typeof this.timer === 'string') {
                return this.timer;
            } else if (Array.isArray(this.timer) && this.timer.length === 1) {
                return this.timer[0];
            }
        }
    },
    data() {
        return {
            tipShow:true,
            timer:[],
            fenxiData: {},
             queryParams: {
                createTimeStart: '',
                createTimeEnd: ''
            },
            summaryList: [
                { label: '收入金额', key: 'shouru', tip: '本周期内新增的收入金额' },
                { label: '支出金额', key: 'zhichu', },
                { label: '盈利', key: 'yingli' },

            ],
            shouruList: [],
            zhichuList: [],
            isShow:false
        }
    },
    methods: {
        timeSearch(val) {
            if (val && val.length === 2) {
                this.queryParams.createTimeStart = val[0] ? val[0] : '';
                this.queryParams.createTimeEnd = val[1] ? val[1] + ' 23:59:59' : '';
            }
            this.init()
        },
        init() {
            fenxi(this.queryParams).then(res=> {
                this.fenxiData = { ...this.summaryData, ...res.data };
            })
            shouruzhichu(this.queryParams).then(res=> {
                console.log(this.commonMaps.tenantBillOrderTypeMap);
                if(res.data.length > 0) {
                    // 处理收入数据
                    const shouruData = [];
                    // 处理支出数据
                    const zhichuData = [];
                    res.data.forEach(item => {
                        const orderTypeName = this.commonMaps.tenantBillOrderTypeMap[item.order_type] || `未知类型(${item.order_type})`;
                        
                        // 如果有收入，添加到收入数据
                        if (item.shouru !=0) {
                            shouruData.push({
                                label: orderTypeName,
                                value: item.shouru,
                                tip: `${orderTypeName}收入`
                            });
                        }
                        
                        // 如果有支出，添加到支出数据
                        if (item.zhichu != 0) {
                            zhichuData.push({
                                label: orderTypeName,
                                value: item.zhichu,
                                tip: `${orderTypeName}支出`
                            });
                        }
                    });
                    
                    // 更新收入数据
                    this.shouruList = shouruData.length > 0 ? shouruData : [
                        { label: '暂无收入数据', value: '0', tip: '本周期内暂无收入数据' }
                    ];
                    
                    // 更新支出数据
                    this.zhichuList = zhichuData.length > 0 ? zhichuData : [
                        { label: '暂无支出数据', value: '0', tip: '本周期内暂无支出数据' }
                    ];

                }else {
                    this.shouruList = []
                    this.zhichuList = []
                }
            })
        }
    },
    mounted() {
          // 默认一月时间
        // 获取最近三十天的日期范围
        const endDate = new Date();
        const startDate = new Date();
        startDate.setDate(startDate.getDate() - 30);

        const formatDate = (date) => {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        };
        this.timer = [formatDate(startDate), formatDate(endDate)];
        this.queryParams.createTimeStart = formatDate(startDate);
        this.queryParams.createTimeEnd = formatDate(endDate) + ' ' + '23:59:59';
        this.init();
    }
}



</script>
<style scoped lang="scss">
.order-summary-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    padding: 10px ;
    margin-bottom: 18px;

    .header {
        margin-top: 16px;
        display: flex;
        justify-content: space-between;

        .title {
            font-size: 16px;
            font-weight: 600;
            color: #222;
            align-items: center;

            .date-range {
                font-size: 12px;
                color: #666;
                margin-left: 8px;
            }
        }

    }
}

.summary-list {
    padding: 16px 16px 0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 0px 5px 0px rgba(0, 0, 0, .1);
    margin-top: 16px;

    .summary-row {
        display: flex;
        margin-bottom: 8px;
        flex-wrap: wrap;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .summary-item {
        padding: 8px 16px;
        width: 218px;
        margin-bottom: 16px;

        background: #F7F8FA;
        border-radius: 4px;
        margin-right: 24px;

        .label {
            font-weight: 500;
            font-size: 16px;
            color: #666;
            display: flex;
            align-items: center;

            img {
                width: 16px;
                height: 16px;
                margin-left: 4px;
                cursor: pointer;
            }
        }

        .value {
            font-size: 32px;
            font-weight: 600;
            color: #333333;
            margin-top: 8px;
        }
    }

    .lines {
        margin: 16px 0;
        background: #EFEFEF;
    }

    .summary-row .summary-item:last-child {
        margin-right: 0;
    }
}
.el-empty {
    padding: 0 0 16px 0 ;
}

.tips {
    display: flex;
    justify-content: space-between;
    color: #fff;
    background: #494994;
    border-radius: 8px;
    padding: 10px;
    margin:0 0 10px;

    i {
        cursor: pointer;
        font-size: 16px;
        color: rgba(255, 255, 255, 0.5);
    }
}
</style>